<template>
  <Card :bordered="false">
    <template #title> 快捷方式 </template>
    <Row :gutter="10">
      <Col
        :span="6"
        :key="shortcut.menuId"
        v-for="shortcut in shortcutList"
        :xs="12"
        :sm="8"
        :md="6"
        :lg="8"
        :xl="6"
      >
        <ShortcutCard
          :icon="shortcut.menuIcon ? shortcut.menuIcon : ''"
          :label="shortcut.menuName"
          @click="jumpTo(shortcut.menuPath)"
        />
      </Col>
    </Row>
  </Card>
</template>

<script lang="ts" setup>
  import ShortcutCard from '@/components/ShortcutCard/index.vue';
  import { Card, Row, Col } from 'ant-design-vue';
  import { onMounted, ref } from 'vue';
  import { useRouter } from 'vue-router';
  import { getUserShortcutMenuInfo } from '@/api/home';

  const router = useRouter();

  const shortcutList = ref([]);

  onMounted(() => {
    // 进来后执行查询
    getUserShortcutMenuInfoList();
  });

  const getUserShortcutMenuInfoList = () => {
    getUserShortcutMenuInfo().then((data) => {
      shortcutList.value = data;
    });
  };

  const jumpTo = (path = '/') => {
    // 跳转
    const query = undefined;
    if (query) {
      router.push({ path: path, query: JSON.parse(query) });
    } else {
      router.push(path);
    }
  };
</script>

<style scoped>
  .ant-list-item {
    padding: 8px 0px !important;
  }
</style>
